<template>
  <div class="box_b">
    <div :id="chartId" :style="{ width, height }"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'BoxRightD',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    msg: String
  },
  data() {
    return {
      chartId: this.randomNum(),
      echart: null,
      colors: [
        '#06a4b2',
        '#F56463',
        '#f8e9c9',
        '#b2cb67',
        '#b42bea',
        '#40daee',
        '#166fd6',
        '#10b73d',
        '#fff225',
        '#f82724'
      ],
      datas: [
        { name: '其它', value: 14 },
        // {
        //   name: "贵州",
        //   value: 8
        // },
        // {
        //   name: "新疆",
        //   value: 6
        // },
        { name: '广西', value: 7 },
        { name: '云南', value: 4 },
        { name: '湖北', value: 9 },
        { name: '江苏', value: 9 },
        { name: '广东', value: 10 },
        { name: '湖南', value: 10 },
        { name: '福建', value: 14 },
        { name: '海外', value: 23 }
      ]
    }
  },
  mounted() {
    this.initEchart()
    window.addEventListener('resize', this.handleUpdateSize())
  },
  activated() {
    this.echart?.resize()
  },
  methods: {
    randomNum() {
      let num = ''
      for (let i = 0; i < 10; i++) {
        num += Math.floor(Math.random() * 100)
      }
      return num
    },
    initEchart() {
      const chartDom = document.getElementById(this.chartId)
      if (!this.echart) {
        this.echart = echarts.init(chartDom)
      } else {
        this.echart.clear()
      }
      this.setOptions()
    },
    setOptions() {
      let option = {
        fontSize: 12,
        color: this.colors,
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['0%', '55'],
            center: ['50%', '50%'],
            roseType: 'radius',
            label: {
              color: '#fff',
              formatter: (params) => {
                return params.name + ' ' + params.value + '%'
              }
            },
            labelLine: {
              length: 1,
              length2: 20
            },
            data: this.datas
          }
        ]
      }
      this.echart.setOption(option)
    },
    handleUpdateSize() {
      this.echart?.resize()
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.handleUpdateSize())
  }
}
</script>
<style scoped>
.box_b {
  height: 200px;
}
</style>
